<template>
  <div class="log-viewer">
    <h2>操作日志查看器</h2>
    <div class="toolbar">
      <button @click="loadLogs">刷新日志</button>
    </div>
    <div v-if="loading">加载中...</div>
    <div v-else-if="paginatedLogs.length === 0" class="no-logs">
      暂无日志数据
    </div>
    <div v-else class="logs-container">
      <div v-for="(log, index) in paginatedLogs" :key="index" class="log-item">
        <div class="log-header">
          <span class="timestamp">{{ formatTime(log.timestamp) }}</span>
          <span class="action">{{ log.action }}</span>
          <span class="frequency">操作次数: {{ log.frequency }}</span>
        </div>
        <div class="log-details">
          <p><strong>终端:</strong> <span :title="log.terminal">{{ truncateText(log.terminal, 50) }}</span></p>
          <p><strong>IP地址:</strong> {{ log.ip }}</p>
          <p><strong>URL:</strong> {{ log.url }}</p>
          <div v-if="log.extraData">
            <div v-if="log.extraData.apiPath">
              <p><strong>API路径:</strong> {{ log.extraData.apiPath }}</p>
              <p><strong>API方法:</strong> {{ log.extraData.apiMethod }}</p>
            </div>
            <div v-if="log.extraData.fields">
              <p><strong>涉及字段数:</strong> {{ log.extraData.fieldsCount }}</p>
              <p><strong>字段列表:</strong> {{ log.extraData.fields.join(', ') }}</p>
            </div>
            <div v-for="(value, key) in getAdditionalData(log.extraData)" :key="key">
              <p><strong>{{ key }}:</strong> {{ JSON.stringify(value) }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页控件 -->
      <div class="pagination" v-if="totalPages > 1">
        <button 
          :disabled="currentPage === 1" 
          @click="currentPage = 1"
          class="pagination-button"
        >
          首页
        </button>
        <button 
          :disabled="currentPage === 1" 
          @click="currentPage--"
          class="pagination-button"
        >
          上一页
        </button>
        <span class="page-info">
          第 {{ currentPage }} 页，共 {{ totalPages }} 页 (共 {{ logs.length }} 条记录)
        </span>
        <button 
          :disabled="currentPage === totalPages" 
          @click="currentPage++"
          class="pagination-button"
        >
          下一页
        </button>
        <button 
          :disabled="currentPage === totalPages" 
          @click="currentPage = totalPages"
          class="pagination-button"
        >
          末页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import LogManager from '../logUtils.js';

export default {
  name: 'LogViewer',
  data() {
    return {
      logs: [],
      loading: false,
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.logs.length / this.pageSize);
    },
    
    paginatedLogs() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.logs.slice(startIndex, endIndex);
    }
  },
  mounted() {
    this.loadLogs();
  },
  methods: {
    async loadLogs() {
      this.loading = true;
      try {
        this.logs = await LogManager.getAllLogs();
        this.currentPage = 1; // 重置到第一页
      } catch (error) {
        console.error('获取日志失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    
    formatTime(timestamp) {
      return new Date(timestamp).toLocaleString('zh-CN');
    },
    
    truncateText(text, maxLength) {
      if (!text) return '';
      return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    },
    
    getAdditionalData(extraData) {
      const reservedKeys = ['apiPath', 'apiMethod', 'fields', 'fieldsCount'];
      const additionalData = {};
      
      for (const key in extraData) {
        if (!reservedKeys.includes(key)) {
          additionalData[key] = extraData[key];
        }
      }
      
      return additionalData;
    }
  }
};
</script>

<style scoped>
.log-viewer {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.toolbar button:hover {
  background-color: #359c6d;
}

.log-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fafafa;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.timestamp {
  color: #666;
  font-size: 14px;
}

.action {
  font-weight: bold;
  color: #333;
}

.frequency {
  background-color: #42b983;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.log-details p {
  margin: 8px 0;
  font-size: 14px;
}

.log-details pre {
  background-color: #f0f0f0;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.danger {
  background-color: #ff5252 !important;
}

.danger:hover {
  background-color: #e00000 !important;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.pagination-button {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.pagination-button:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  white-space: nowrap;
  font-size: 14px;
  color: #666;
}
</style>